﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Line.aspx.cs" MasterPageFile="~/Site.master"
    Inherits="WS.EKA.Web.UI.Demo.Line" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link rel="stylesheet" type="text/css" href="/Styles/jquery.jqplot.min.css" />
    <script type="text/javascript" src="/Scripts/jquery.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.jqplot.js"></script>
    <!--ajax 请求-->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.json2.js"></script>
    <!-- 点线图  -->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.dateAxisRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.barRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.categoryAxisRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasTextRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasAxisTickRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
    <script type="text/javascript" src="/Scripts/plugins/jqplot.highlighter.js"></script>
    <!-- 在图标上显示数字值-->
    <script type="text/javascript" src="/Scripts/plugins/jqplot.pointLabels.js"></script>
    <script type="text/javascript">

        
        //测试后发现，点线图X轴只能显示有规律的内容。如时间 数字等

        $(document).ready(function () {
            var plot2 = $.jqplot('chart4', [[['2011-8-21', 5], ['2011-09-28', 5.8], ['2011-10-11', 7], ['2011-10-16', 13], ['2011-10-26', 4.5]]], {
                title: 'Plot With Options',
                // You can specify options for all axes on the plot at once with
                // the axesDefaults object.  Here, we're using a canvas renderer
                // to draw the axis label which allows rotated text.
                axesDefaults: {
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                },
                seriesDefaults: {
                     rendererOptions: {
                        smooth: true,
                        animation: {
                                show: true,
                                speed:2500
                        },
                        showMarker: true
                        
                    },
                    pointLabels: { show: true, location: 'e', edgeTolerance: -15 }
                },
                axes: {
                    xaxis: {
                        label: "X Axis",
                        show: false,
                        renderer: $.jqplot.DateAxisRenderer,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                            formatString: "%m月 %d 日",
                            angle: -30,
                            textColor: '#000'
                        },
                        min: "2011-08-01",
                        max: "2011-11-30",
                        tickInterval: "7 days",
                        drawMajorGridlines: false
                    },
                    yaxis: {
                        label: "Y Axis"
                    }
                }

            });
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="chart4">
    </div>
</asp:Content>
